css img自适应盒子尺寸 | 您所在的位置:网站首页 › css 图片缩放不失真 › css img自适应盒子尺寸 |
首先保证图片可以填满 然后纵向居中 .img-cantainer { position: relative; width: 260px; height: 150px; overflow: hidden; img { position: absolute; top: 50%; min-height: 100%; min-width: 100%; transition: all .3s; transform: translateY(-50%); z-index: -1; } }或者 不管容器有多大,只要将img的宽高设置成100%(这里的100%是相对于父级宽高而言)就能自适应容器大小。 img{ width: 100%; height: 100%; }那是不是就这这么简单完事儿了呢?如果你不介意图片被放大后可能出现失真的话也的确是这样就ok了。 假如你介意 图片放大后会失真,我们可以改进上面的代码,只需要将img的样式简单修改 img { max-width: 100%; max-height: 100%; }max-width:100%和width:100%的区别在于,max-width是相对于img自身的尺寸而言的。意思是图片最大宽度为自身尺寸的宽,在这里就是100px。而width的100%我们上面已经说过了是相对于父级宽度的,所以为了不让图片被放大后失真我们可以设置img的最大宽度为自身尺寸大小,更通俗的讲就是只允许缩小不允许放大img。 具体情况中是选择width:100%还是max-width:100%还是依据个人的需求而定,另外在响应式设计中这个问题稍微会复杂一点 响应式 响应式设计中:如果是img标签引入的图片,可以使用延迟加载的方式来加载,在实际加载图片之前先用js检查窗口宽度,然后加载不同分辨率的图片,比如宽度 |
CopyRight 2018-2019 实验室设备网 版权所有 |